<template>
  <div :class="className">
    <el-table
      v-show="data.tableData.length > 0"
      :data="data.tableData"
      stripe
      ref="tableRef"
      class="jzt-table"
      row-key="quotaId"
      highlight-current-row
      style="height: calc(100vh - 220px)"
    >
      <template #empty>
        <el-empty description="这里暂时什么都没有" />
      </template>
      <el-table-column width="50" fixed>
        <template #default="scope">
          <div class="my-handle">
            <img :src="drag" alt="" style="width: 20px" />
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="序号" type="index" width="80" /> -->
      <el-table-column label="定额名称" prop="quotaName" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.quotaName" :maxlength="15" @change="handelChangequotaName(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="材料及工艺说明" prop="standardDesc" width="100">
        <template #default="scope">
          <div class="process_description">
            <!-- <el-input v-model="scope.row.standardDesc" @change="handelChangequotaName(scope.row)" /> -->
            <p class="text-over" v-if="scope.row.standardDesc" :title="scope.row.standardDesc">{{ scope.row.standardDesc }}</p>
            <el-button v-else type="primary" link @click="handelClickEditAccept(scope.row)">编辑</el-button>
            <el-icon size="20" color="#007dff" @click="handelClickEditAccept(scope.row)"><Edit /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片/视频" prop="quotaName" width="170">
        <template #default="scope">
          <div class="quota_upload">
            <div v-if="scope.row.picUrlList?.length > 0 || scope.row.videoUrlList?.length > 0">
              <img
                v-if="scope.row.picUrlList?.length > 0"
                :src="scope.row.picUrlList[0]"
                style="width: 125px; height: 90px"
                alt=""
              />
              <video style="width: 125px; height: 90px" controls>
                <source :src="scope.row.videoUrlList[0]" type="video/mp4" />
                <source :src="scope.row.videoUrlList[0]" type="video/ogg" />
              </video>
              <el-icon size="20" color="#007bff" @click="handelClickEditAccept(scope.row)"><Edit /></el-icon>
            </div>
            <el-button v-else type="primary" link @click="handelClickEditAccept(scope.row)">
              编辑&nbsp;<el-icon size="20" color="#007bff"><Edit /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="quotaName" width="130">
        <template #default="scope">
          <el-select v-model="scope.row.unit" placeholder="" @change="handelChangeUnit(scope.row)">
            <el-option v-for="(item, i) in data.unitList" :key="i" :label="item.label" :value="item.value">{{
              item.label
            }}</el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="耗损率" prop="lostRate" width="100">
        <template #default="scope">
          <div class="attrition_rate">
            <!-- <el-input v-model="scope.row.lostRate" @change="handelInputAttritionRate(scope.row, 1)" /> -->
            <el-input-number
              class="mr4"
              v-model="scope.row.lostRate"
              :controls="false"
              :min="0"
              :max="100"
              :precision="2"
              style="width: 120px"
              @change="handelInputAttritionRate(scope.row, 1)"
            ></el-input-number>
            <div>%</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="成本">
        <el-table-column label="定额主材及软装其他" prop="mainCostMoney" width="180">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.mainProductShowType == null">
                <el-input-number
                  style="width: 60px"
                  :controls="false"
                  v-model="scope.row.mainCostMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
                <el-button link type="primary" @click="handelClickMainMaterials(scope.row, 1)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </div>
              <span v-else>
                <!-- mainCostMoney有值的时候，回显值 -->
                <el-button
                  v-if="scope.row.mainCostMoney"
                  class="border"
                  :class="{ red: scope.row.isPrincipalDeList === 1 }"
                  link
                  :type="scope.row.isAuxiliaryDeList === 1 ? 'danger' : 'primary'"
                  @click="handelClickMainMaterials(scope.row, 1)"
                >
                  <template v-if="scope.row.mainProductShowType === 2"><span>按实际</span></template>
                  <template v-else>
                    {{ scope.row.mainCostMoney }}
                  </template>
                </el-button>
                <!-- mainCostMoney没有值得时候，回显“导入” -->
                <el-button v-else link type="primary" @click="handelClickMainMaterials(scope.row, 1)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="定额辅材" prop="auxiliaryCostMoney" width="180">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.auxiliaryProductShowType == null">
                <el-input-number
                  style="width: 60px"
                  :controls="false"
                  v-model="scope.row.auxiliaryCostMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
                <el-button link type="primary" @click="handelClickMainMaterials(scope.row, 2)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </div>
              <span v-else>
                <!-- auxiliaryCostMoney有值的时候，回显值 -->
                <el-button
                  v-if="scope.row.auxiliaryCostMoney"
                  class="border"
                  :class="{ red: scope.row.isAuxiliaryDeList === 1 }"
                  link
                  :type="scope.row.isAuxiliaryDeList === 1 ? 'danger' : 'primary'"
                  @click="handelClickMainMaterials(scope.row, 2)"
                >
                  <template v-if="scope.row.auxiliaryProductShowType === 2"><span>按实际</span></template>
                  <template v-else>{{ scope.row.auxiliaryCostMoney }}</template>
                </el-button>
                <!-- auxiliaryCostMoney没有值得时候，回显“导入” -->
                <el-button v-else link type="primary" @click="handelClickMainMaterials(scope.row, 2)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="人工" prop="workerCostMoney" width="140">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.workerCostType == 0">
                <el-input-number
                  style="width: 60px"
                  :controls="false"
                  v-model="scope.row.workerCostMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
                <el-button link type="primary" @click="handelClickAddPepole(scope.row)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </div>
              <span v-else>
                <!-- workerCostMoney有值的时候，回显值 -->
                <el-button
                  v-if="scope.row.workerCostMoney"
                  class="border"
                  link
                  type="primary"
                  @click="handelClickAddPepole(scope.row)"
                >
                  {{ scope.row.workerCostMoney }}
                </el-button>
                <!-- workerCostMoney没有值得时候，回显“导入” -->
                <el-button v-else link type="primary" @click="handelClickAddPepole(scope.row)">
                  <span>导入</span>
                  <img style="width: 20px" :src="importIcon" alt="" />
                </el-button>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="发包" width="180">
        <el-table-column label="定额主材及软装其他" prop="mainSubcontractMoney" width="120">
          <template #default="scope">
            <div class="quota_import">
              <div>
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  :min="0"
                  v-model="scope.row.mainSubcontractMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="定额辅材" prop="auxiliarySubcontractMoney" width="120">
          <template #default="scope">
            <div class="quota_import">
              <div>
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  :min="0"
                  v-model="scope.row.auxiliarySubcontractMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="人工" prop="workerSubcontractMoney" width="120">
          <template #default="scope">
            <div class="quota_import">
              <div>
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  :min="0"
                  v-model="scope.row.workerSubcontractMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="报价" width="180">
        <el-table-column label="定额主材及软装其他" prop="quoteTotalMoney" width="180">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.mainProductShowType == null">
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  v-model="scope.row.mainQuoteMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
              <el-button type="primary" link class="border" v-else @click="handelClickMainMaterialsCb(scope.row, 1)">
                <template v-if="scope.row.mainProductShowType === 2"><span>按实际</span></template>
                <template v-else> {{ scope.row.mainQuoteMoney }}</template>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="定额辅材" prop="auxiliaryQuoteMoney" width="180">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.auxiliaryProductShowType == null">
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  v-model="scope.row.auxiliaryQuoteMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
              <el-button
                type="primary"
                link
                class="border"
                v-else
                @click="handelClickMainMaterialsCbauxiliaryQuoteMoney(scope.row, 2)"
              >
                <template v-if="scope.row.auxiliaryProductShowType === 2"><span>按实际</span></template>
                <template v-else> {{ scope.row.auxiliaryQuoteMoney }}</template>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="人工" prop="workerQuoteMoney" width="140">
          <template #default="scope">
            <div class="quota_import">
              <div v-if="scope.row.workerCostType == 0">
                <el-input-number
                  style="width: 100%"
                  :controls="false"
                  v-model="scope.row.workerQuoteMoney"
                  @change="handleChangeMainCostMoney(scope.row)"
                />
              </div>
              <el-button type="primary" link class="border" v-else @click="handelClickLabor(scope.row)">
                {{ scope.row.workerQuoteMoney }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="总计" width="180">
        <el-table-column label="成本" prop="costTotalMoney" width="100" />
        <el-table-column label="报价" prop="quoteTotalMoney" width="100" />
        <el-table-column label="利润率" prop="profitRate" width="100" />
        <el-table-column label="发包" prop="subcontractTotalMoney" width="100" />
      </el-table-column>
      <el-table-column label="备注" prop="remark" width="200">
        <!-- <template #default="scope">
            <el-input v-model="scope.row.remark" :maxlength="200" @change="handelChangequotaName(scope.row)" />
          </template> -->
        <template #default="scope">
          <RemarkEditor
            v-model="scope.row.remark"
            :showCancel="false"
            :isEdit="true"
            @submit="handelChangequotaName(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="70" fixed="right">
        <template #default="scope">
          <div class="operate">
            <el-switch v-model="scope.row.isStatus" @change="handelChangeSwitch(scope.row)" />
            <el-popconfirm title="确认删除?" @confirm="handelClickDelet(scope.row)">
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-show="data.tableData.length <= 0" description="这里暂时什么都没有" />
    <!-- 报价主材 -->
    <dialogView
      :show="data.isMainMaterials"
      :width="'60%'"
      :title="'根据商品添加'"
      @close="handelCloseMainMater"
      @save="handelSaveBjZc"
    >
      <div class="total_pic">
        <span style="margin-right: 40px"
          >定额{{ deType === 1 ? "主材" : "辅材" }}成本：<span style="color: red">￥{{ data.costTotalMoney }}</span></span
        >
        <span
          >定额{{ deType === 1 ? "主材" : "辅材" }}报价：<span style="color: red">￥{{ data.quoteTotalMoney }}</span></span
        >
      </div>
      <div class="tabels">
        <el-table :data="data.mainMaterialsList" class="jzt-table" stripe>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="材料名称" prop="productAliasName"></el-table-column>
          <el-table-column label="规格" prop="skuSpecification"></el-table-column>
          <el-table-column label="单位" prop="productType">
            <template #default="scope">
              {{ useCodeArrStore().getDictName("shop_unit", scope.row.productType) }}
            </template>
          </el-table-column>
          <el-table-column label="单价成本" prop="costUnitPrice"></el-table-column>
          <el-table-column label="单价报价">
            <template #default="scope">
              <el-input v-model="scope.row.quoteUnitPrice" type="number"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="productNum"> </el-table-column>
        </el-table>
      </div>
      <template #footerLeft>
        <div class="jzt-flex-center">
          <span>共：{{ data?.mainMaterialsList?.length }}款</span>
          <p v-if="data.checkType === 2" class="ml20"><span style="color: red">*</span>任选数量：{{ data.productCheckedNum }}</p>
        </div>
      </template>
    </dialogView>
    <!-- 报价定额辅材 -->
    <dialogView
      :show="data.isAuxiliary"
      :width="'60%'"
      :title="'根据组合条件添加'"
      @close="handelCloseAuxiliaryMaterials"
      @save="handelSavefc"
    >
      <div class="title">
        <span style="margin-right: 40px"
          >{{ deType === 1 ? "主材" : "辅材" }}数量：<span style="color: #3d3d3d">{{ data.limitProductNum }}</span></span
        >
        <span
          >限制金额：<span style="color: #3d3d3d">{{ data.limitProductMoney }}</span></span
        >
      </div>
      <div class="content_list">
        <div class="child" v-for="(item, index) in data.bjAuxiliaryMaterials" :key="index">
          <div class="child_left">
            <div class="top">
              <span>{{ item.categoryName }}</span>
              <span> ({{ item.costPriceMin }}-{{ item.costPriceMax }})</span>
            </div>
            <ul>
              <li v-for="(citem, ci) in item.productProList" :key="ci">{{ citem.stastsName }}</li>
            </ul>
          </div>
          <div class="child_right">
            <div>
              <span>报价范围：</span>
              <el-input-number
                style="width: auto !important"
                v-model="item.quotePriceMin"
                placeholder="请输入"
                :controls="false"
              ></el-input-number>
              <span style="margin: 0 10px"> 至</span>
              <el-input-number
                style="width: auto !important"
                v-model="item.quotePriceMax"
                placeholder="请输入"
                :controls="false"
              ></el-input-number>
            </div>
          </div>
        </div>
      </div>
    </dialogView>
    <!-- 报价人工 -->
    <dialogView :show="data.isLabor" :width="'60%'" :title="'人工报价'" @close="handelCloseLabor" @save="handelSubmitPbj">
      <div class="total_pic">
        <span style="margin-right: 40px"
          >人工成本：<span style="color: red">￥{{ data.costTotalMoneybjp }}</span></span
        >
        <span
          >人工报价：<span style="color: red">￥{{ data.quoteTotalMoneybjp }}</span></span
        >
      </div>
      <div class="tabels">
        <el-table :data="data.manualQuotationData" class="jzt-table" stripe>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="工种名称" prop="workerType">
            <template #default="scope">
              <span>{{ useCodeArrStore().getDictName("quota_worker_type", scope.row.workerType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="workerNum"> </el-table-column>
          <el-table-column label="计费方式" prop="unit">
            <template #default="scope">
              <span>{{ useCodeArrStore().getDictName("shop_unit", scope.row.unit) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价成本" prop="costUnitPrice"></el-table-column>
          <el-table-column label="单价报价" prop="quoteUnitPrice">
            <template #default="scope">
              <el-input v-model="scope.row.quoteUnitPrice" type="number"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </dialogView>
    <div class="artificial">
      <!-- <el-drawer v-model="data.isAccept" title="工程验收标准" :with-header="false"></el-drawer> -->
      <drawerView :show="data.isShowPepole" :size="1200" :title="'人工成本'" @close="handelClosePepole">
        <!-- 人工成本 -->
        <div class="top">
          <span
            >人工成本<span>￥{{ data.costTotalPrice }}</span></span
          >
          <el-button type="primary" @click="handelAddPepole">添加人工</el-button>
        </div>
        <div class="tabels">
          <el-table :data="data.pepoleList" class="jzt-table" stripe>
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column label="工种名称" prop="workerType" width="180">
              <template #default="scope">
                <el-select placeholder="" v-model="scope.row.workerType">
                  <el-option
                    v-for="(item, i) in data.quota_worker_type"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="workerNum" width="180">
              <template #default="scope">
                <!-- <el-input v-model="scope.row.workerNum"></el-input> -->
                <!-- <inputNum v-model:value="scope.row.workerNum"></inputNum> -->
                <el-input-number v-model="scope.row.workerNum" :min="0" :controls="false" />
              </template>
            </el-table-column>
            <el-table-column label="单价成本" prop="quoteUnitPrice" width="180">
              <template #default="scope">
                <!-- <inputNum v-model:value="scope.row.costUnitPrice"></inputNum> -->
                <el-input-number v-model="scope.row.costUnitPrice" :min="0" :controls="false" />
              </template>
            </el-table-column>
            <el-table-column label="计费方式" width="180">
              <template #default="scope">
                <el-select placeholder="" v-model="scope.row.unit">
                  <el-option
                    v-for="(item, i) in data.quota_charge_type"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-popconfirm title="确认删除?" @confirm="handelClickDeletPepol(scope.row)">
                  <template #reference>
                    <el-button link type="primary">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="btn">
          <el-button @click="data.isShowPepole = false">取消</el-button>
          <el-button type="primary" @click="handelClickConfirmAdd">确认添加</el-button>
        </div>
      </drawerView>
    </div>
  </div>
</template>
<script setup>
// 资源导入
import { reactive, onMounted, defineProps, watch, ref, defineEmits, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Plus, Edit, CircleCloseFilled } from "@element-plus/icons-vue";
// import draggable from "vuedraggable";
import drag from "@/static/images/drag.png";
import importIcon from "@/static/images/import.png";
import Sortable from "sortablejs";
import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
// 组件
import drawerView from "./drawerView.vue";
import dialogView from "./dialogView.vue";
// import inputNum from "@/components/inputNum/index.vue";
// api
import {
  saveOrUpdate,
  quotaTemplateListOld,
  deleteTemplate,
  getStandardTreeSelect,
  quotaWorkerList,
  saveOrUpdateAdd,
  quotaProductList,
  saveOrUpdateProductMoney,
  quotaProductConditionList,
  quotaWorkerLists,
  saveOrUpdateMoney,
  quotaTemplateUpdateSort
} from "@/apis/createFile/index.js";
import { imgsUpload } from "@/apis/products/specifications";
import { getEnumAll } from "@/apis/products/specifications";
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
import RemarkEditor from "@/components/RemarkEditor";
const ossStore = useMultipartOssStore();
// 变量定义
const tableRef = ref();
const router = useRouter();
const route = useRoute();
const emits = defineEmits("ok");
const props = defineProps({
  Data: {
    type: Object,
    default: () => {}
  },
  currNode: {
    type: Object,
    default: () => {}
  },
  list: {
    type: Array,
    default: () => {
      return [];
    }
  },
  projectId: {
    type: String,
    default: ""
  },
  saveLocalStore: {
    type: Function,
    default: null
  },
  className: {
    type: String,
    default: "quota_content_table"
  }
});
const deType = ref(null); //定额类型：1-主材  2-辅材
const isFullScreen = ref(false);

const data = ref({});

watch(
  () => props.Data,
  val => {
    data.value = val;
  },
  { deep: true, immediate: true }
);

// 编辑时删除工艺图片
const handelClickDeletPicter = (item, index) => {
  data.value.acceptanceCriteria.picUrlList.splice(index, 1);
};
// 删除工艺视频
const handelClickDeletVideo = (item, index) => {
  data.value.acceptanceCriteria.videoUrlList.splice(index, 1);
};
const rowDrop = () => {
  const tbody = document.querySelector(`.${props.className} .el-table__body-wrapper tbody`);
  console.log("AAAAAAAAAA", tbody, props.className);
  Sortable.create(tbody, {
    animation: 150,
    ghostClass: "blue-background-class",
    handle: ".my-handle",
    onEnd({ newIndex, oldIndex }) {
      // console.log(99999, newIndex, oldIndex);
      data.value.tableData.splice(newIndex, 0, data.value.tableData.splice(oldIndex, 1)[0]);
      const newArray = data.value.tableData.slice(0);
      data.value.tableData = [];
      nextTick(function () {
        newArray.map((item, index) => {
          item.showOrder = index + 1;
        });
        data.value.tableData = newArray;
        console.log("拖拽后的数据===", data.value.tableData);
        quotaTemplateUpdateSortFun(newArray);
      });
    }
  });
};

const quotaTemplateUpdateSortFun = arr => {
  quotaTemplateUpdateSort({ sortReqList: arr }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "拖拽排序修改成功",
        type: "success"
      });
    }
  });
};
const handelInputAttritionRate = item => {
  // item.lostRate = item.lostRate.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1");
  // if (item.lostRate > 100) {
  //   item.lostRate = "";
  //   return;
  // }
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...item
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
const handelClickMainMaterials = (item, num) => {
  // console.log(99999, item);
  // num=1时为主材，2时为辅材
  router.push({
    path: "/quota-main-materials",
    query: {
      quotaName: item.quotaName, //定额名称
      quotaId: item.quotaId,
      num: num, //1主材，2辅材
      mainProductShowType: num === 1 ? item.mainProductShowType : item.auxiliaryProductShowType //1 商品 2 组合
    }
  });
};
// 当主材没有导入修改事件
const handleChangeMainCostMoney = item => {
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...item
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 新增人工
const quotaId = ref("");
const handelClickAddPepole = item => {
  data.value.isShowPepole = true;
  quotaId.value = item.quotaId;
  getPepoleList();
};
const getPepoleList = () => {
  if (data.value.isShowPepole) {
    quotaWorkerList(quotaId.value).then(res => {
      const artificialArr = isArray(res.data.quotaWorkerVOList) ? res.data.quotaWorkerVOList : [];
      artificialArr.map(it => {
        it.workerType = it.workerType.toString();
        it.unit = it.unit.toString();
      });
      data.value.pepoleList = res.data.quotaWorkerVOList;
      data.value.costTotalPrice = res.data.costTotalPrice;
    });
  }
};
const handelClosePepole = () => {
  data.value.isShowPepole = false;
};
// 添加人工
const handelAddPepole = () => {
  data.value.pepoleList.push({
    ids: Date.now(),
    workerType: "",
    unit: "",
    costUnitPrice: 0,
    workerNum: 0,
    costTotalPrice: 0
  });
};
// 人工确认添加
const handelClickConfirmAdd = () => {
  const parms = {
    quotaId: quotaId.value,
    workerDetailsList: data.value.pepoleList
  };
  saveOrUpdateAdd(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      data.value.isShowPepole = false;
      getList();
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
// 人工删除
const handelClickDeletPepol = item => {
  let index = data.value.pepoleList.findIndex(citem => citem.ids === item.ids);
  if (index > -1) {
    data.value.pepoleList.splice(index, 1);
  }
};
// 获取数据字典
const getEnumAlls = async () => {
  await getEnumAll()
    .then(res => {
      console.log(res);
      let arr = [];
      res.data.map(it => {
        if (it.dictId == 134) {
          it.dictDataList.map(cit => {
            arr.push({ label: cit.dictLabel, value: cit.dictValue });
          });
        } else if (it.dictType === "quota_charge_type") {
          it.dictDataList.map(cit => {
            (cit.label = cit.dictLabel), (cit.value = cit.dictValue);
          });
          data.value.quota_charge_type = it.dictDataList;
        } else if (it.dictType === "quota_worker_type") {
          it.dictDataList.map(cit => {
            (cit.label = cit.dictLabel), (cit.value = cit.dictValue);
          });
          data.value.quota_worker_type = it.dictDataList;
        }
      });

      data.value.unitList = arr;
    })
    .catch(err => {
      console.log(err);
    });
};
// 报价辅材-----------------------
const nums = ref(1);
const handelClickMainMaterialsCbauxiliaryQuoteMoney = (item, num) => {
  deType.value = 2; //辅材
  console.log(item, "9999", num);
  if (item.auxiliaryProductShowType == 1) {
    data.value.isMainMaterials = true;
    data.value.quotaId = item.quotaId;
    nums.value = num;
    quotaProductList(item.quotaId, num)
      .then(res => {
        data.value.checkType = res.data.checkType;
        data.value.productCheckedNum = res.data.productCheckedNum;
        data.value.costTotalMoney = res.data.costTotalMoney;
        data.value.quoteTotalMoney = res.data.quoteTotalMoney;
        data.value.mainMaterialsList = res.data.productVOList;
      })
      .catch(err => {
        console.log(err);
      });
  } else {
    handelClickQuotationAuxiliaryMaterials(item, 2);
  }
};
// 报价主材-----------------------
const handelClickMainMaterialsCb = (item, num) => {
  deType.value = 1; //主材
  console.log(item, "9999", num);
  if (item.mainProductShowType == 1) {
    data.value.isMainMaterials = true;
    data.value.quotaId = item.quotaId;
    nums.value = num;
    quotaProductList(item.quotaId, num)
      .then(res => {
        data.value.checkType = res.data.checkType;
        data.value.productCheckedNum = res.data.productCheckedNum;
        data.value.costTotalMoney = res.data.costTotalMoney;
        data.value.quoteTotalMoney = res.data.quoteTotalMoney;
        data.value.mainMaterialsList = res.data.productVOList;
      })
      .catch(err => {
        console.log(err);
      });
  } else {
    handelClickQuotationAuxiliaryMaterials(item, 1);
  }
};
const handelCloseMainMater = () => {
  data.value.isMainMaterials = false;
};
const handelSaveBjZc = () => {
  const parms = {
    quotaId: data.value.quotaId,
    infoReqList: data.value.mainMaterialsList,
    productType: nums.value
  };
  saveOrUpdateProductMoney(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "保存成功"
      });
      data.value.isMainMaterials = false;
      getList();
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
// 报价定额辅材-------------
const handelCloseAuxiliaryMaterials = () => {
  data.value.isAuxiliary = false;
};
const handelSavefc = () => {
  data.value.isAuxiliary = false;
};
const handelClickQuotationAuxiliaryMaterials = (item, num) => {
  data.value.isAuxiliary = true;
  data.value.quotaId = item.quotaId;
  quotaProductConditionList(item.quotaId, num)
    .then(res => {
      console.log(res);
      data.value.limitProductMoney = res.data.limitProductMoney;
      data.value.limitProductNum = res.data.limitProductNum;
      data.value.bjAuxiliaryMaterials = res.data.voList;
    })
    .catch(err => {
      console.log(err);
    });
};
// 报价人工
const handelClickLabor = item => {
  data.value.isLabor = true;
  data.value.quotaId = item.quotaId;
  quotaWorkerLists(item.quotaId).then(res => {
    data.value.costTotalMoneybjp = res.data.costTotalPrice;
    data.value.quoteTotalMoneybjp = res.data.quoteTotalPrice;
    data.value.manualQuotationData = res.data.quotaWorkerVOList;
  });
};
const handelSubmitPbj = () => {
  const parms = {
    quotaId: data.value.quotaId,
    workerMoneyDetailsList: data.value.manualQuotationData
  };
  saveOrUpdateMoney(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "保存成功"
      });
      data.value.isLabor = false;
      getList();
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
const handelCloseLabor = () => {
  data.value.isLabor = false;
};
// 获取列表
const getList = () => {
  quotaTemplateListOld(props.projectId).then(res => {
    res.data.map(it => {
      it.isStatus = it.quotaState == 0 ? false : true;
      if (it.unit !== null) {
        it.unit = it.unit.toString();
      }
    });
    data.value.tableData = res.data;
  });
};
const handelClickNewAdd = () => {
  const parms = {
    projectId: props.projectId,
    quotaType: 1
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "创建成功"
        });
        getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 定额名称实时保存
const handelChangequotaName = item => {
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...item
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
const handelChangeSwitch = item => {
  item.quotaState = item.isStatus ? 1 : 0;
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...item
  };

  // delete item.isStatus;

  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: item.isStatus === 1 ? "定额启用成功" : "定额禁用成功"
        });
        getList();
      } else {
        getList();
      }
    })
    .catch(err => {
      console.log(err);
      getList();
    });
};
// 修改单位保存
const handelChangeUnit = item => {
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...item
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        getEnumAlls();
        getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 删除
const handelClickDelet = item => {
  deleteTemplate(item.quotaId).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      getList();
    }
  });
};
const chosenObject = ref({});
// 工程验收标准
const handelClickEditAccept = item => {
  data.value.isAccept = true;
  chosenObject.value = item;
  console.log(item);

  getStandardTreeSelect().then(res => {
    // const arr = [];
    res.data.map(it => {
      it.label = it.standardName;
      it.value = it.standardId;
      it.children = it.dtoChildren;
      it.dtoChildren?.map(cit => {
        cit.label = cit.standardName;
        cit.value = cit.standardId;
        cit.children = cit.dtoChildren;
        cit.dtoChildren?.map(ccit => {
          ccit.label = ccit.standardName;
          ccit.value = ccit.standardId;
          ccit.children = ccit.dtoChildren;
        });
      });
    });
    console.log(res.data, "最后的数据");
    data.value.materialsAndProcesses = item;
    // 回显
    data.value.acceptanceCriteria.picUrlList = data.value.materialsAndProcesses.picUrlList;
    data.value.acceptanceCriteria.picIdList = data.value.materialsAndProcesses.picIdList;
    data.value.acceptanceCriteria.videoUrlList = data.value.materialsAndProcesses.videoUrlList;
    data.value.acceptanceCriteria.videoIdList = data.value.materialsAndProcesses.videoIdList;
    data.value.acceptanceCriteria.shortcomingDesc = data.value.materialsAndProcesses.shortcomingDesc;
    data.value.acceptanceCriteria.standardDesc = data.value.materialsAndProcesses.standardDesc;
    data.value.options = res.data;
  });
};
//====================================图片上传========================================================================================
const FileList = ref([]); //商品图片list
const imgFileList = ref([]); //编辑时商品图片list
const videoList = ref([]); //商品视频list
const uploadImg = ref();
const uploadVideo = ref();
const videoListAll = ref([]);
// const imgIsReady = ref(false);
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { isArray } from "lodash";
const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img") => {
  //选中文件触发的change事件
  console.log("触发文件上传==", fileList);
  let _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  const flag = await fileType(type, type === "img" ? _fileList : [file]);
  if (!flag) {
    const errorFile = [];
    const successFile = [];
    if (type === "img") {
      ElMessage({
        message: "只能上传jpeg，jpg，png图片文件，大小不超过5M",
        type: "error",
        offset: 60
      });
      for (let item of _fileList) {
        if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png") || item.raw.size > 1024 * 1024 * 5) {
          errorFile.push(item);
        } else {
          successFile.push(item);
        }
      }
      // const errorFile = _fileList.filter(
      //   item => !(item.raw.type === "image/jpeg" || item.raw.type === "image/png") || item.raw.size > 1024 * 1024 * 5
      // );
      for (let item of errorFile) {
        uploadImg.value.handleRemove(item);
      }
    } else if (type === "video") {
      ElMessage({
        message: "只能上传视频文件，并且视频时长不超过45秒，大小不超过100M",
        type: "error",
        offset: 60
      });
      for (let item of _fileList) {
        if (!(item.raw.type === "video/mp4") || item.raw.size > 1024 * 1024 * 100) {
          errorFile.push(item);
        } else {
          successFile.push(item);
        }
      }
      // const errorFile = _fileList.filter(item => !(item.raw.type === "video/mp4"));
      for (let item of errorFile) {
        uploadVideo.value.handleRemove(item);
      }
      return;
    }
    if (successFile.length <= 0) return;
  }
  //   imgIsReady.value = false;
  if (type === "img") {
    FileList.value = fileList;

    for (let item of _fileList) {
      await customUpload(item, { file: item }, type);
    }
  } else {
    // videoList.value = fileList;
    videoList.value = [file];

    for (let item of videoList.value) {
      await customUpload(item, { file: item }, type);
    }
  }
}, 100);
/**
 * 校验文件类型
 */
const fileType = async (type, fileList) => {
  let flag = true;
  if (type === "img") {
    for (let item of fileList) {
      if (!((item.raw.type === "image/jpeg" || item.raw.type === "image/png") && item.raw.size <= 1024 * 1024 * 5)) {
        flag = false;
      }
      if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
        flag = false;
      }
    }
  } else if (type === "video") {
    for (let item of fileList) {
      // console.log("视频的大小===", item.raw.size);
      if (!(item.raw.type === "video/mp4" && item.raw.size <= 1024 * 1024 * 100)) {
        flag = false;
      }
      if (item.raw.type === "video/mp4") {
        await getTimes(item.raw);
        // console.log("视频的时长===", item.raw.size <= 1024 * 1024 * 100, videoTime.value);
        if (!(videoTime.value <= 45)) {
          flag = false;
        }
      }
    }
  }
  return flag;
};
/**
 * 获取视频时间长度
 */
const videoTime = ref(0);
const getTimes = async file => {
  let content = file;
  //获取录音时长
  let url = URL.createObjectURL(content);
  //经测试，发现audio也可获取视频的时长
  let audioElement = new Audio(url);
  console.log(2222);
  await new Promise((resolve, reject) => {
    audioElement.addEventListener("loadedmetadata", _event => {
      //保存获取时间长度
      videoTime.value = parseInt(audioElement.duration);
      resolve("时长获取成功");
    });
  });
};

/**
 * 上传
 */
const getFileName = name => {
  const arr = name.split(".");
  const _arr = JSON.parse(JSON.stringify(arr));
  let _name = "";
  let _suffix = "";
  if (arr.length > 2) {
    _arr.splice(_arr.length - 1, 1);
    _name = _arr.join(".");
    _suffix = arr[arr.length - 1];
  } else {
    _name = arr[0];
    _suffix = arr[1];
  }
  const folder = getFolder();
  return folder + _name + new Date().getTime() + "." + _suffix;
};
const customUpload = async (item, option, type) => {
  // 合并已上传和当前上传文件
  const objName = getFileName(option.file.name);
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl.split("?")[0]);
      if (type === "img") {
        item["img"] = res.fileUrl.split("?")[0];
        // data.acceptanceCriteria.picUrlList.push(res.fileUrl.split("?")[0]);
      } else {
        item["video"] = res.fileUrl.split("?")[0];
        console.log("视频===", videoList.value);
        data.value.acceptanceCriteria?.videoUrlList?.push(videoList.value[0].video);
        console.log(data.value.acceptanceCriteria?.videoUrlList, "videoListAll");
      }
      item["folder"] = objName;

      const Option = JSON.parse(JSON.stringify(option));
      uploadIMG(Option); //图片上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};

//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.img || option.file.video,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};
// 选择引用平台标准
const handelChangeCascader = arr => {
  // console.log(arr);
  if (!arr) return;
  const id = arr[arr.length - 1];
  console.log(id);
  data.value.options.map(it => {
    if (it.standardId === arr[0]) {
      console.log(it);
      it.children?.map(cit => {
        cit.children?.map(ccit => {
          if (ccit.standardId == id) {
            // console.log(ccit, "44444");
            data.value.acceptanceCriteria = ccit;
          }
        });
      });
    }
  });
};
// 确定引用
const handelClickOk = () => {
  emits("ok", data.value.acceptanceCriteria);
  console.log(data.value.materialsAndProcesses, "data.acceptanceCriteria");

  data.value.materialsAndProcesses.picUrlList = data.value.acceptanceCriteria.picUrlList;
  data.value.materialsAndProcesses.picIdList = data.value.acceptanceCriteria.picIdList;
  data.value.materialsAndProcesses.videoUrlList = data.value.acceptanceCriteria.videoUrlList;
  data.value.materialsAndProcesses.videoIdList = data.value.acceptanceCriteria.videoIdList;
  data.value.materialsAndProcesses.shortcomingDesc = data.value.acceptanceCriteria.shortcomingDesc;
  data.value.materialsAndProcesses.standardDesc = data.value.acceptanceCriteria.standardDesc;
  data.value.isAccept = false;
  const parms = {
    projectId: props.projectId,
    quotaType: 1,
    ...data.value.materialsAndProcesses
  };
  saveOrUpdate(parms)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        // getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 取消
const handelClickBack = () => {
  data.value.isAccept = false;
};
onMounted(async () => {
  // await getEnumAlls();
  setTimeout(() => {
    rowDrop();
    console.log("可以开始拖拽了");
  }, 500);
});
// 监听
watch(
  () => props.Data,
  val => {
    nextTick(() => {
      const _quotaId = route.query.quotaId;
      console.log(11111, _quotaId);
      if (_quotaId) {
        const row = data.value.tableData.find(item => item.quotaId === _quotaId);
        tableRef.value?.setCurrentRow(row);
      }
    });
  },
  { deep: true, immediate: true }
);
watch(
  () => imgFileList.value,
  list => {
    console.log(list, "wwww");
    let arr = [];
    list.map(it => {
      arr.push(it.img);
    });
    data.value.acceptanceCriteria.picUrlList = arr;
    console.log(arr, "---------------");
  },
  { deep: true }
);
// 人工成本总价
watch(
  () => data.value.pepoleList,
  list => {
    let sum = list.reduce(
      (accumulator, currentItem) => accumulator + Number(currentItem.workerNum) * Number(currentItem.costUnitPrice),
      0
    );
    data.value.costTotalPrice = sum;
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
:deep(.el-table) {
  td {
    .el-button.el-button--primary.is-link.border {
      border-bottom: 1px solid #007dff;
    }
    .el-button.el-button--danger.is-link.border.red {
      color: #ff3333;
      &:hover {
        color: #ff3333;
      }
      border-bottom: 1px solid #ff3333;
    }
  }
  .el-input__wrapper,
  .el-select__wrapper {
    background-color: white !important;
  }
  .el-table__cell {
    .remark-info {
      max-width: 120px !important;
    }
    .remark-info .text-over {
      max-width: 60px !important;
    }
  }
}
:deep(.el-textarea__inner) {
  min-height: 100px !important;
}
// 报价--------------
.title {
  height: 50px;
  display: flex;
  align-items: center;
  span {
    font-size: 16px;
    color: #86909c;
  }
}
.content_list {
  height: 460px;
  overflow-y: auto;
  .child {
    display: flex;
    min-height: 100px;
    justify-content: space-between;
    background: #f6f8fa;
    border-radius: 4px 4px 4px 4px;
    padding: 20px;
    margin-bottom: 20px;
    .child_left {
      .top {
        font-size: 14px;
        color: #303133;
        padding: 0;
        background-color: transparent;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          padding: 6px 10px;
          background: #ffffff;
          border-radius: 20px 20px 20px 20px;
          border: 1px solid #e1e6ed;
          box-sizing: border-box;
          margin: 0 10px 0 0;
        }
      }
    }
    .child_right {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
        :deep(.el-input) {
          width: 80px;
        }
      }
    }
  }
}
// 报价----end
// 报价成本主材
.total_pic {
  display: flex;
  align-items: center;
  height: 40px;
  span {
    font-size: 18px;
  }
}
// 人工
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 60px;
  background-color: #fff;
  span {
    font-size: 18px;
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  button:nth-child(1) {
    background-color: #f2f3f5;
    width: 92px;
    height: 32px;
  }
}
.quota_content {
  display: flex;
  flex-direction: column;
  height: 5000px;
  .quota_content_header {
    padding-top: 20px;
    max-height: 40px;
    // background-color: #ccc;
    min-height: 40px;
    position: sticky;
    top: 0;
    z-index: 22;
    background-color: white;
  }
  .quota_content_table {
    height: auto;
    height: calc(100% - 30px);
    overflow-y: scroll;
  }
}
.operate {
  // display: flex;
  // align-items: center;
}
.process_description {
  display: flex;
  align-items: center;
  :deep(.el-icon) {
    cursor: pointer;
  }
}
.attrition_rate {
  display: flex;
  align-items: center;
  :deep(.el-input) {
    // width: 50%;
  }
}
.quota_import {
  // display: flex;
  // align-items: center;
  div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    img {
      width: 20px;
    }
  }
}
// 工程验收标准
.accept {
  :deep(.el-drawer__body) {
    padding: 0 !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
  }
}
.accept_content {
  position: relative;
  height: 100%;
  .header {
    height: 75px;
    border-bottom: 1px solid #dcdfe6;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    &_left {
      padding-left: 20px;
      overflow: hidden;
      span {
        font-size: 18px;
        color: #303133;
      }
    }
    &_right {
      padding-right: 20px;
      overflow: hidden;
      :deep(.el-input__wrapper) {
        background-color: white;
        box-shadow: none;
        .el-input__inner {
          color: #007dff;
          text-align: right;
        }
        .el-input__inner::placeholder {
          color: #007dff;
        }
        .el-input__icon {
          color: #007dff;
        }
      }
      :deep(.el-cascader) {
        .el-input.is-focus .el-input__wrapper {
          box-shadow: none;
        }
      }
    }
  }
  .content {
    padding: 20px;
    height: calc(100% - 130px);
    overflow: scroll;
    button {
      background-color: transparent !important;
      border: 0 !important;
    }
    :deep(.el-form-item__content) {
      display: flex;
      flex-direction: column !important;
      align-items: start !important;
    }
  }
  .fottor {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background-color: #fff;
    z-index: 222;
  }
}
.video_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  overflow-x: scroll;
  flex-wrap: wrap;
  .video_item {
    width: 150px;
    height: auto;
    margin: 0 16px 0 0;
    position: relative;
    video {
      width: 100%;
      // height: 50%;
    }
    .close_icon {
      position: absolute;
      z-index: 99;
      right: 6px;
      top: 4px;
      cursor: pointer;
    }
    .close_icon :hover {
      color: #007dff;
    }
  }
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  .standard_diagram_item {
    position: relative;
    img {
      width: 100px;
      height: 100px;
      margin: 0 10px 0 0;
    }
    .close_icon {
      position: absolute;
      right: 0px;
      top: -11px;
      z-index: 1;
      cursor: pointer;
    }
    .close_icon :hover {
      color: #007dff;
    }
  }
}
.quota_upload {
  display: flex;
  align-items: center;
}
</style>
